import Vue from 'vue'
import VueRouter from 'vue-router' // 引入路由模块
import App from './Appr1.vue'

/* 路由组件 */
import Home from './views/Home'
import Register from './views/Register'
import About from './views/About'
import TodoListApp from './views/TodoListApp'

import 'bulma/css/bulma.min.css'

Vue.config.productionTip = false

// 在 Vue.prototype 上添加一个 $bus 属性，这样
// 以后每个 vue 组件都可以使用 this.$bus 调用到该属性
Vue.prototype.$bus = new Vue()

// 全局混入
Vue.mixin({
  created() {
    console.log('组件创建', this.$options.name)
  },
  mounted() {
    console.log('组件挂载完毕', this.$options.name)
  }
})

/* 使用 vue-router */
// 使用插件
Vue.use(VueRouter)
// 创建 VueRouter 对象实例
const router = new VueRouter({
  mode: 'hash', // 不取 mode 时，默认为 hash，也可以 history
  routes: [ // 配置路由路径与组件的关联关系
    {
      path: '/home', // 路由路径
      component: Home // 需要关联渲染的路由组件
    },
    {
      path: '/register',
      component: Register
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/todolist.html',
      component: TodoListApp
    }
  ]
})

new Vue({
  router, // 向 Vue 根实例中注入 router 路由对象的使用
  render: h => h(App)
}).$mount('#app')
